<template>
	<div class="evidence-unit-container" :style="[{ overflow: 'hidden' }, { height: screenHeight - 120 + 'px' }]">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-row justify="end">
				<el-button type="warning" icon="el-icon-check" @click="goCheckPage" size="mini">盘点</el-button>
				<el-button type="primary" icon="el-icon-edit" @click="goAddPage" size="mini">新增</el-button>
				<el-button type="danger" icon="el-icon-delete" @click="onDelete" size="mini">删除</el-button>
				<!-- <el-button type="warning" icon="el-icon-document" size="mini">导入</el-button> -->
				<el-button type="success" icon="el-icon-download" @click="exportExcel(`${activeName}`, '导出的数据', `${activeTitle}` + '.xlsx')" size="mini"
					>导出</el-button
				>
			</el-row>
			<el-tabs v-model="activeName" @tab-click="change">
				<el-tab-pane label="案件列表" id="first" name="first"><CaseList v-if="activeName == 'first'" ref="refCase" /></el-tab-pane>
				<el-tab-pane label="案卷列表" id="second" name="second"><EvidenceList v-if="activeName == 'second'" ref="evidenceListRef" /></el-tab-pane>
				<el-tab-pane label="位置列表" name="third"><StoreIndex v-if="activeName == 'third'" isShow="1" height="100" /></el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import CaseList from '/@/views/evidence/unit/component/case.vue';
import EvidenceList from '/@/views/evidence/unit/component/evidence.vue';
import StoreIndex from '/@/views/system/store/index.vue';
import { deleteCase } from '/@/api/case/index';
import { exportExcel } from '/@/common/excel';
export default {
	name: 'unitEvidence',
	components: { CaseList, EvidenceList, StoreIndex },
	setup() {
		const drawer = ref(false);
		const caseListRef = ref();
		const evidenceListRef = ref();
		const route = useRoute();
		const router = useRouter();
		const state = reactive({
			defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
			screenHeight: document.body.clientHeight,
			activeName: 'first',
			activeTitle: '案件列表',
		});
		// 删除当前行
		const onDelete = async () => {
			if (state.activeName == 'first') {
				const records = refCase.value.getCheckRecords();
				if (records.length < 1) {
					ElMessage({ message: '请选择要删除的案件', type: 'warning' });
					return;
					false;
				}
				await ElMessageBox.confirm('此操作将永久删除案件, 是否继续?', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(() => {
						const ids = records.map(function (x) {
							return x.id;
						});
						deleteCase({ ids: ids }).then((res) => {
							if (res.success) {
								ElMessage({
									message: '删除成功',
									type: 'success',
								});
								refCase.value.init();
							}
						});
					})
					.catch(() => {});
			}
			if (state.activeName == 'second') {
				const evidenceList = evidenceListRef.value;
				evidenceList.onDelete();
			}
		};

		const goCheckPage = () => {
			if (state.activeName == 'first') {
				const caseList = refCase.value;
				caseList.getEviByCaseId();
			} else if (state.activeName == 'second') {
				const evidenceList = evidenceListRef.value;
				evidenceList.pandian();
			} else {
				ElMessage({
					message: '请勾选案件或者案卷进行盘点',
					type: 'warning',
				});
			}
		};
		const goAddPage = () => {
			router.push({
				path: '/evidence/add',
			});
		};
		const refCase = ref();
		function change() {
			switch (state.activeName) {
				case 'first':
					state.activeTitle = '案件列表';
					break;
				case 'second':
					state.activeTitle = '案卷列表';
					break;
				case 'third':
					state.activeTitle = '位置列表';
					break;
			}
		}
		return {
			goCheckPage,
			caseListRef,
			evidenceListRef,
			goAddPage,
			drawer,
			onDelete,
			refCase,
			exportExcel,
			change,
			...toRefs(state),
		};
	},
	methods: {},
};
</script>
